import React from 'react';
import _ from 'lodash';
import Box from '@/pages/GanSuDaTang/Dashboard/components/Box';
import { default as MyChart } from '@/pages/GanSuDaTang/Dashboard/components/chart';

import styles from './index.less';

const rows = [
  { name: '火电', key: 'thermalPower', color: '#2651FF' },
  { name: '风电', key: 'windPower', color: '#2C8EF3' },
  { name: '太阳能', key: 'solarEnergy', color: '#BEE5FB' },
  { name: '水电', key: 'hydropower', color: '#46DADB' },
  { name: '储能', key: 'energyStorage', color: '#07A872' },
];

export default ({ dataSource }) => {
  const [list, setList] = React.useState([]);
  const [datas, setDatas] = React.useState({});

  React.useEffect(() => {
    fmtData();
  }, [JSON.stringify(dataSource)]);

  const fmtNum = (v, c = 2) => {
    if (!v) return 0;
    return v.toFixed(c);
  };

  const getRate = (key) => {
    let rate = 0;
    const total = dataSource?.provinceInstalledCapacity || 0;
    const val = dataSource?.[key] || 0;
    if (!!val && !!total) {
      rate = ((val / total) * 100).toFixed(2);
    }
    return rate;
  };

  const fmtData = () => {
    datas.total = fmtNum(dataSource?.provinceInstalledCapacity); // 全省装机容量
    datas.yoy = fmtNum(dataSource?.yoy * 100); // 较上年(%)
    datas.newEnergy = fmtNum(dataSource?.newEnergy);
    datas.newEnergyRate = getRate('newEnergy');
    let list = rows.map((item) => {
      const value = dataSource?.[item.key] || 0;
      const rate = getRate(item.key);
      return {
        ...item,
        value,
        rate,
      };
    });
    list = _.sortBy(list, 'value').reverse();
    setList(list);
    setDatas(datas);
  };

  const getChart = () => {
    return {
      grid: { top: 0, right: 0, bottom: 0, left: 0 },
      series: [
        {
          type: 'pie',
          radius: ['80%', '100%'],
          data: list.map(({ name, color, key }) => ({
            name,
            value: dataSource?.[key] || 0,
            itemStyle: { color },
          })),
          startAngle: 90,
          label: { show: false },
          itemStyle: {
            borderWidth: 1,
            borderColor: 'transparent',
          },
          silent: true,
        },
      ],
    };
  };

  return (
    <Box title={'全省装机容量'}>
      <div className={styles.container}>
        <div className={styles.chart_head}>
          <div className={styles.unit}>单位：万千瓦</div>
          <div>
            其中新能源：
            <span className={styles.din} style={{ margin: '0 8px' }}>
              {datas.newEnergy || 0}
            </span>
            <span className={styles.din}>{datas.newEnergyRate || 0}</span>%
          </div>
        </div>
        <div className={styles.chart}>
          <div className={styles.chart_pie}>
            <div className={styles.total}>
              <div className={styles.lab1}>全省装机容量</div>
              <div className={styles.val1}>{datas.total}</div>
              <div
                className={[
                  styles.yoy,
                  datas.yoy > 0 ? styles.up : datas.yoy < 0 ? styles.down : '',
                ].join(' ')}
              >
                <div className={styles.lab2}>较上年</div>
                <i />
                <div className={styles.val2}>{datas.yoy}%</div>
              </div>
            </div>
            <MyChart option={getChart()} />
          </div>
          <div className={styles.chart_data}>
            {list.map((row) => (
              <div key={row.name}>
                <i style={{ background: row.color }} />
                <div className={styles.lab}>{row.name}</div>
                <div className={styles.val}>{fmtNum(row.value)}</div>
                <div className={styles.rate}>{row.rate}%</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Box>
  );
};
